<template>
  <!--顶部横条-->
    <div class="banner" :style="{background:color}">
        <div class="left"><img :src="title" alt=""></div>
        <div class="center"></div>
        <div class="right">
          {{year}}{{month}}{{date}}&emsp;{{week}}&emsp;{{hh}}{{mm}}{{ss}}
        </div>
    </div>
  <!--顶部横条-->
</template>

<script>
    export default {
        name: "Banner",
        data(){
          return{
            year:'',
            month:'',
            date:'',
            week:'',
            hh:'',
            mm:'',
            ss:'',
            title:'',
            color:'',
          }
        },
        created(){
            this.color=this.$util.storage.get('color');
            this.title=this.$util.storage.get("title");
        },
        mounted(){
          this.currentTime();
        },
        methods:{
          currentTime () {
            setInterval(() => {
              setTimeout(this.getDate, 0)
            }, 1000);
            // setInterval(this.getDate, 1000);
          },
          getDate () {
            this.year = new Date().getFullYear()+'/';
            this.month = (new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1))+'/';
            this.date = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()+'';
            this.hh = (new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours())+':';
            this.mm = (new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes())+':';
            this.ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()+'';
            let week = new Date().getDay()
            if (week === 1) {
              this.week = '星期一'
            } else if (week === 2) {
              this.week = '星期二'
            } else if (week === 3) {
              this.week = '星期三'
            } else if (week === 4) {
              this.week = '星期四'
            } else if (week === 5) {
              this.week = '星期五'
            } else if (week === 6) {
              this.week = '星期六'
            } else if (week === 27) {
              this.week = '星期日'
            }
          },

        },


    }
</script>

<style scoped>
  .banner{
    height: 102px;
    width: 100%;
    /*background: #29be74;*/
    line-height: 102px;
    display: flex;
    box-sizing: border-box;
    padding-right: 35px;
    padding-left: 35px;
    box-shadow: 5px 2px 18px #9a9a9a;
  }
  .left{
    flex: 1;
    display: flex;
    justify-content: left;
    align-items: center;
  }
  .center{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .right{
    flex: 1;
    font-size: 30px;
    color: white;
    font-family: "Adobe 黑体 Std R";
    text-align: right;
  }


</style>
